<template>
  <div>
    <van-cell-group>
      <van-field
        v-model="username"
        required
        label="实际领用人"
        placeholder="请输入实际领用人"
      />
      <van-field
        v-model="phone"
        label="实际领用人身份证号"
        placeholder="请输入实际领用人身份证号"
      />
      <van-field
        v-model="phone"
        required
        label="实际领用人手机号"
        placeholder="请输入实际领用人手机号"
        error-message="手机号格式错误"
      />
      <van-field
        readonly
        clickable
        required
        name="picker1"
        :value="department"
        label="实际领用部门"
        placeholder="点击选择"
        @click="showPicker1 = true"
      />
      <van-popup
        v-model="showPicker1"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="departments"
          @confirm="onConfirm1"
          @cancel="showPicker1 = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        required
        name="picker2"
        :value="xmyt"
        label="项目用途"
        placeholder="点击选择"
        @click="showPicker2 = true"
      />
      <van-popup
        v-model="showPicker2"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="xmyts"
          @confirm="onConfirm2"
          @cancel="showPicker2 = false"
        />
      </van-popup>
    </van-cell-group>
    <van-field
      name="radio"
      label="加急申请"
    >
      <template #input>
        <van-radio-group
          v-model="radio"
          direction="horizontal"
        >
          <van-radio name="1">是</van-radio>
          <van-radio name="2">否</van-radio>
        </van-radio-group>
      </template>
    </van-field>

    <van-field
      v-model="message"
      rows="2"
      autosize
      label="备注"
      type="textarea"
      maxlength="50"
      placeholder=""
      show-word-limit
    />

  </div>
</template>

<script>

export default {
  data () {
    return {
      value: '',
      department: '',
      departments: ['传送部', '网管中心', '集客部', '信息部', '总工办'],
      showPicker1: false,
      xmyts: ['建设领用', '建设预领', '维护领用'],
      xmyt: '',
      showPicker2: false,
      radio: '2',
      message: ''
    }
  },
  methods: {
    onConfirm1 (value) {
      this.department = value;
      this.showPicker1 = false;
    },
    onConfirm2 (value) {
      this.xmyt = value;
      this.showPicker2 = false;
    },
    onClickRight () {
      this.$router.push('/apply/LyFinish')
    },
    // onClickitem(){

    //   this.$router.push('/GoodsList')
    // }
  }
}

</script>

<style>
</style>